<template>
  <div class="home-sider-container">
    <el-menu
      class="el-menu-vertical-demo"
      background-color="var(--themeBackColor)"
      text-color="var(--themeSideTextColor)"
      active-text-color="var(--themeColor)"
      router
      :default-active="this.$route.path"
      :collapse="this.isCollapse"
      :collapse-transition="false"
    >
      <el-menu-item :index="item.path" v-for="item in this.menus" :key="item.path">
        <i :class="item.children[0].meta.icon"> </i>
        <span slot="title">{{ item.children[0].meta.title }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'home-sider',
  props: {
    menus: {
      type: Array /* 类型 */,
      default: [] /* 外界没有传值 则默认值为100  */,
      required: false /*必填  */,
    },
    isCollapse: {
      type: Boolean,
      default: false,
    },
  },
}
</script>

<style lang="less" scoped>
</style>
